<template>
  <div class="info-wrap">
    <div class="list">
      <el-row v-for="(item, index) in userInfoArray" :key="index" class="item">
        <div class="title">{{ item.title }}</div>
        <div class="desc">{{ item.desc }}</div>
      </el-row>
    </div>
  </div>
</template>
<script>
export default {
  name: 'UserInfo',
  data() {
    return {
      userInfo: {
        name: 'xx',
        phone: '15291914528',
        id: '3'
      },
      userInfoTitle: [
        {
          title: '用户姓名',
          desc: ''
        },
        {
          title: '手机号',
          desc: ''
        },
        {
          title: '用户ID',
          desc: ''
        }
      ]
    }
  },
  computed: {
    userInfoArray() {
      const result = []
      const userInfo = Object.values(this.userInfo)
      this.userInfoTitle.map((item, index) => {
        item.desc = userInfo[index]
        result.push(item)
      })
      return result
    }
  }
}
</script>
<style lang="scss" scoped>
.info-wrap {
  width: 100%;
  padding: 20px;
  box-sizing: border-box;
  .list {
    width: 100%;
    border: 1px solid #dcdfe6;
    border-bottom: none;
    box-sizing: border-box;
    .item {
      width: 100%;
      border-bottom: 1px solid #dcdfe6;
      box-sizing: border-box;
      display: flex;
      background-color: #e6effb;
      .title {
        width: 30%;
        height: 80px;
        line-height: 80px;
        text-align: center;
        border-right: 1px solid #dcdfe6;
        box-sizing: border-box;
        color: #757575;
      }
      .desc {
        width: 70%;
        height: 80px;
        line-height: 80px;
        text-align: center;
        color: #757575;
      }
    }
  }
}
</style>
